<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
* {margin:0; padding:0; list-style:none;}

#div1 {width:850px; height:500px; margin:50px auto; overflow:hidden; position:relative;}
#div1 ul {position:absolute;left: 0;top: 0;}
#div1 ul li{height:500px;}
#div1 ol {position:absolute;right: 10%;bottom: 10px;z-index:6}
#div1 ol li{width: 20px;height: 20px;background: #fff;margin-left: 5px;float: left;line-height: 20px;text-align: center;}
#div1 ol li.ac{background: red;color: #fff;}
#div1>a{text-decoration: none;position: absolute;top: 50%;margin-top: -10px;height: 40px;line-height: 32px;text-align: center;width: 40px;font-size: 40px;vertical-align: middle;color: #fff;background: rgba(0,0,0,0.5);z-index:6;}
#goPrev{left: 0;}
#goNext{right: 0;}
img{width:850px; height:500px;}
</style>
<script>
window.onload=function (){
    class Carousel {
        constructor() {
          this.div = document.querySelector('#div1'),
              this.ul = this.div.querySelector('ul'),
              this.imgs = this.ul.querySelectorAll('li'),
              this.ol = this.div.querySelector('ol'),
              this.goPrev = document.querySelector('#goPrev'),
              this.goNext = document.querySelector('#goNext'),
              this.btns = [] // 所有按钮,
              //获取本来图片的张数
            this.len = this.imgs.length + 1,
            //获取图片的宽度
            // ismove 记录运动状态
            this.isMove = false,
            // index 当前图片的下标
            this.index = 0,
            //lastindex 之前一张图片的下标
            this.lastindex = 0,
            this.height = this.imgs[0].offsetHeight
            this.into()
            this.goPrev_onclick()
            this.goNext_onclick()
        }
      into() {
          this.ul.appendChild(this.imgs[0].cloneNode(true))
            //计算ul的宽度
          this.ul.style.height = this.len * this.height + 'px'
          Array.from(this.imgs).forEach( (img, i) => {
          var li = document.createElement('li')
          li.innerHTML = i + 1
          if(i == 0) li.className = 'ac'
          this.btns.push(li)
          this.ol.appendChild(li)
          li.onclick = () => {
            if(!this.isMove) {
              this.isMove = true
              this.lastindex = this.index
              this.index = i
              this.btns[this.lastindex].classList.remove('ac')
              this.btns[this.index].classList.add('ac')
              this.move(this.index)
            }
          }
        })
        this.auto()
        this.div.onmouseenter = () => {
          var _this = this
          clearInterval(_this.timer)
        }
        this.div.onmouseleave = () => {
          this.auto()
        }
      }

      // auto自动播放
      auto () {
        var _this = this
            _this.timer = setInterval(() => {
              _this.goNext.onclick();
            }, 3000)
          }

      // goPrev 上一页
      goPrev_onclick() {
        var _this = this
        _this.goPrev.onclick = () => {
        if(!_this.isMove) {
          _this.isMove = true
          _this.lastindex = _this.index
          _this.index--
          if(_this.index < 0) {
            _this.ul.style.top = -(_this.imgs.length * _this.height) + 'px'
            _this.index = _this.imgs.length - 1
            _this.btns[_this.lastindex].classList.remove('ac')
            _this.btns[_this.index].classList.add('ac')
            _this.move(_this.index)
          } else {
            _this.btns[_this.lastindex].classList.remove('ac')
            _this.btns[_this.index].classList.add('ac')
            _this.move(_this.index)
          }
        }
      }
      }

      //goNext 下一页
      goNext_onclick() {
        var _this = this
        _this.goNext.onclick = () => {
          if(!_this.isMove) {
            _this.isMove = true
            _this.lastindex = _this.index
            _this.index++
            if(_this.index === _this.imgs.length) {
              _this.move(_this.index,function() {
                _this.ul.style.top = 0 + 'px'
              })
              _this.index = 0
              _this.btns[_this.lastindex].classList.remove('ac')
              _this.btns[_this.index].classList.add('ac')
            } else {
              _this.btns[_this.lastindex].classList.remove('ac')
              _this.btns[_this.index].classList.add('ac')
              _this.move(_this.index)
            }
          }
        }
      }
      


      //move移动函数
      move(num, fn) {
        clearInterval(this.ul.timer)
        // 起点值就是当前ul相对offsetParent的偏移
        var start = this.ul.offsetTop;
        // num是当前运动的下标
        var end = -num * this.height;
        this.ul.timer = setInterval(() => {
          var distance = end - start;
          var speed = distance > 0 ? Math.ceil(distance / 10) : Math.floor(distance / 10)
          start += speed
          this.ul.style.top = start + 'px'
          if (start === end) {
            clearInterval(this.ul.timer)
            // 每一次move结束都应该回到静止状态
            this.isMove = false
            fn && fn()
          }
        }, 30)
      }
    }
     var carousel = new Carousel()
  }
  
  
</script>
</head>

<body>
<div id="div1">
	<ul>
    	<li><img src="images/1.jpg" /></li>
    	<li><img src="images/2.jpg" /></li>
    	<li><img src="images/3.jpg" /></li>
    	<li><img src="images/4.jpg" /></li>
      <li><img src="images/5.jpg" /></li>
    </ul>
    <ol>

    </ol>
    <a href="javascript:;" id="goPrev">&laquo;</a>
    <a href="javascript:;" id="goNext">&raquo;</a>
</div>
</body>
</html>
